<template>
  <s-layout title="蛋糕配送到家">
    <view>
      <s-goods-card
        ref="guoyao"
        :data="goodsCard.data"
        :products="state.pagination.data"
        :styles="goodsCard.style"
      />
      <s-empty
        v-if="state.pagination.total === 0"
        icon="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/2489e93becde3c4254a1d5cda65818f8fcorder-empty.png"
        text="暂无订单"
      ></s-empty>
      <!-- 加载更多 -->
      <uni-load-more
        v-if="state.pagination.total > 0"
        :status="state.loadStatus"
        :content-text="{
          contentdown: '上拉加载更多',
        }"
        @tap="loadmore"
      />
    </view>
  </s-layout>
</template>

<script setup>
import { computed, reactive } from "vue";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import {
  formatOrderColor,
  getOrderStatusName,
  getOrderAfterSaleStatusName,
} from "@/sheep/hooks/useGoods";
import sheep from "@/sheep";
import _, { clone } from "lodash";

const pagination = {
  data: [],
  page: 1,
  total: 0,
  size: 5,
};
// 数据
const state = reactive({
  currentTab: 0,
  pagination: {
    data: [],
    page: 1,
    total: 0,
    size: 5,
  },
  loadStatus: "",
  deleteOrderId: 0,
  error: 0,
});
// 订单详情
function onOrderDetail(id) {
  sheep.$router.go("/pages/order/detail", {
    id,
  });
}

const goodsCard = reactive({
  data: {
    mode: 2,
    goodsFields: {
      title: {
        show: 1,
      },
      subtitle: {
        show: 1,
      },
      price: {
        show: 1,
      },
      original_price: {
        show: 1,
      },
      sales: {
        show: 1,
      },
      stock: {
        show: 0,
      },
    },
    buyNowStyle: {
      // "mode": 2,
      // "text": "立即购买",
      // "color1": "#E9B461",
      // "color2": "#EECC89",
      // "src": "\/storage\/decorate\/20221115\/4782356b4587dc4f4a218f2540a0bafc.png",
      // "right": '20rpx',
      // "bottom":"18rpx"
    },
    tagStyle: {
      show: 0,
      src: "",
    },
    params: {
      orderField: "sort",
      orderSort: "asc",
    },
    borderRadiusTop: 6,
    borderRadiusBottom: 6,
    space: 8,
  },
  style: {
    background: {
      type: "color",
      bgImage: "",
      bgColor: "",
    },
    marginLeft: 8,
    marginRight: 8,
    marginTop: 0,
    marginBottom: 10,
    borderRadiusTop: 0,
    borderRadiusBottom: 0,
    padding: 0,
  },
});

// 获取订单列表
async function getOrderList() {
  state.loadStatus = "loading";
  console.log("size:", state.pagination);
  let res = await sheep.$api.cake.getCakeProductList(
    { categoryId: 459, orderField: "sort", orderSort: "desc" },
    {
      page: state.pagination.page - 1,
      size: state.pagination.size,
    }
  );
  const { data, totalElements, totalPages } = res;

  // content.forEach(it => {
  //   it.orderItemList.forEach(item => {
  //     let str = "";
  //     const obj = JSON.parse(item.spData);
  //     Object.keys(obj).forEach((key) => {
  //       str += key + "：" + obj[key] + " ";
  //     });
  //     item.spDataValue = str;
  //   })
  // })
  state.pagination.data = data;
  console.log(_.concat(state.pagination.data, data));
  state.pagination.total = totalElements;
  if (state.pagination.page < totalPages) {
    state.loadStatus = "more";
  } else {
    state.loadStatus = "noMore";
  }
}

onLoad(async (options) => {
  if (options.type) {
    state.currentTab = options.type;
  }
  getOrderList();
});

// 加载更多
function loadmore() {
  if (state.loadStatus !== "noMore") {
    state.pagination.page++;
    getOrderList();
  }
}

// 上拉加载更多
onReachBottom(() => {
  loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
  state.pagination = clone(pagination);
  getOrderList();
  setTimeout(function () {
    uni.stopPullDownRefresh();
  }, 800);
});

function reloadData() {
  state.pagination = clone(pagination);
  getOrderList();
}
</script>
<style lang="scss" scoped>
::v-deep .select--uni-select {
  width: 240rpx;
}

.line-box {
  display: flex;
  justify-content: space-between;
  line-height: 60rpx;
}

.order-item {
  margin: 0 auto;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  width: 670rpx;
  padding: 20rpx;
  background-color: #fff;
}

.order-item:first-child {
  margin-top: 20rpx;
}

page {
  background-color: #efeef3;
}

.scroll-Y {
  height: calc(100vh - 820rpx);
  overflow: hidden;
}

.store-box {
  margin-top: 20rpx;

  .shopName {
    font-size: 35rpx;
    margin-bottom: 20rpx;
  }

  .store-item {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 20rpx;
  }
}

.body {
  position: relative;
  z-index: 99999;
  margin: -40rpx 30rpx 0 30rpx;
  padding: 0 15rpx;
  background-color: white;
  border-radius: 14rpx;
  padding-bottom: 20rpx;

  &__text {
    font-weight: bold;
    font-size: 30rpx;
    margin-top: 15rpx;
  }
}

.integral {
  display: flex;
  align-items: flex-end;
  padding: 20rpx;

  &__nav {
    // color: $u-main-color;
    font-weight: bold;
    margin-bottom: 20rpx;
    font-size: 30rpx;

    text {
      font-size: 38rpx;
    }
  }

  &__desc {
    font-size: 24rpx;
    // color: $u-type-info;
    margin-bottom: 10rpx;
  }
}

.grid-text {
  font-size: 38rpx;
  font-weight: bold;
}

.grid-desc {
  font-size: 24rpx;
  // color: $u-type-info;
  margin-bottom: 30rpx;
}
</style>
